<html>
    <head>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <h1 style="color:red">Vue.js官方文档中的介绍章节中的所有实验</h1>
        <hr/>
        <!--第一次尝试vue -->
        <div id="app">
            {{ message }}
        </div>

        <hr/>
        <!-- v-bind: 用来绑定html标签的属性的，比如这里的title属性  -->
        <h3 id="app-1" v-bind:title="time">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </h3>

        <hr/>
        <p id="app-3" v-if="seen">
            你可以看见我了！
        </p>

        <hr/>
        <!--  从数组中获得数据   -->
        <ul id="app-4" >
            <li v-for="item in items">{{ item.text }}</li>
        </ul>

        <hr/>
        <!---翻转字符串-  -->
        <div id="app-5">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">翻转字符串</button>
        </div>

        <hr/>
        <!-- 实现数据的双向绑定 -->
        <div id="app-6">
            <p>{{ message }}</p>
            <input v-model="message" />
        </div>

        <hr/>
        <!-- 测试自己定义的页面组件  -->
        <div id="app-7">
            <ol>
                <todo-item v-for="item in items" :key = "item.id"  
                        v-bind:todo="item" >        
                </todo-item>
            </ol>
        </div>
        
        <hr/>
        <p id="app-end">
            <todo-my></todo-my>
        </p>

        <script>
              // 定义名为 todo-item 的新组件
              Vue.component('todo-item', {
                  props: ['todo'],
                  template: '<li>这是个待办项={{ todo.text }}</li>'
              });
              //定义一个空模版 但是发现无法使用 暂时放在一边，看后面的章节
              Vue.component('todo-my', {
                template: '<h1>my template </h1>'
              });
              var append=new Vue({
                  el:'#app-end'
              });

              var app=new Vue({
                  el: "#app",
                  data: {
                      message: "hello vue!!",
                    }
              });

              var app1=new Vue({
                 el: "#app-1",
                  data: {
                    time: "now time is"+ new Date().toLocaleString(),
                    }
              });

              var app3=new Vue({
                  el:"#app-3",
                  data:{
                      seen: true
                  }
              });

              var app4=new Vue({
                  el: "#app-4",
                  data:{
                      items:[
                          {text:"text 1"},
                          {text:"text 2"},
                          {text:"text 3"}
                      ]
                  }
              });

              var app5=new Vue({
                  el: "#app-5",
                  data:{
                      message:"hello world!"
                  },
                  methods:{
                    reverseMessage:function () {
                        this.message = this.message.split('').reverse().join('')
                    }
                  }
              });

              var app6=new Vue({
                  el:'#app-6',
                  data:{
                      message:'init value'
                  }
              });

              var app7=new Vue({
                  el:'#app-7',
                  data:{
                      items:[
                          {id:1,text:"hello"},
                          {id:2,text:"world"},
                          {id:3,text:"!!!"}
                      ]
                  }
              });
        </script>
    </body>
</html>